<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-09 10:21:36
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 11:23:24
-->
<template>
  <div class="left-echarts-node">
    <div class="tip">
      <span>工单占比</span>
      <dv-decoration2 :dur="2" />
    </div>
    <div class="chart-main">
      <template v-for="(item, idx) in rankingList" :key="idx">
        <div class="work-order-chart flex flex-wrap justify-center">
          <div class="item w-full flex justify-center flex-wrap items-center">
            <Progress type="circle" :width="90" :strokeWidth="10" :percent="item.percentage" :stroke-color="item.strokeColor">
              <template #format="percent">
                <span style="color: #fff; font-size: 16px">{{ percent }}%</span>
              </template>
            </Progress>
          </div>
          <div class="desc">{{ formatStatus(item.status) }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted, defineComponent, onUnmounted, nextTick } from 'vue';
import { orderStatusCountApi } from '/@/api/data-statistics/index.ts';
import { useUserStore } from '/@/store/modules/user';
import { Progress } from 'ant-design-vue';
import '@/assets/js/highcharts/highcharts.js';
import '@/assets/js/highcharts/highcharts-3d.js';
import '@/assets/js/highcharts/modules/exporting.js';
import { RANKDING_LIST as rankingStaticList } from './config.ts';
export default defineComponent({
  components: { Progress },
  setup() {
    const userStore = useUserStore();

    let { proxy } = getCurrentInstance();

    let rankingList = ref([]);

    /**
     * 初始化工单占比统计
     */
    function initOrderStatusCount() {
      orderStatusCountApi().then((res) => {
        if (res.length !== 0) {
          // 计算总订单数量
          const totalOrders = res.reduce((sum, item) => sum + item.orderCount, 0);

          // 计算每个状态的订单数量占总订单数量的百分比
          const percentages = res.map((item) => ({
            status: item.status,
            percentage: item.orderCount !== 0 ? parseFloat((item.orderCount / totalOrders) * 100).toFixed(2) : '',
          }));

          rankingList.value = percentages.map((_) => {
            if (_.status == 0) {
              _['strokeColor'] = {
                '0%': '#108ee9',
                '100%': '#87d068',
              };
            }
            if (_.status == 1) {
              _['strokeColor'] = {
                '0%': '#FF896D',
                '100%': '#D02020',
              };
            }
            if (_.status == 2) {
              _['strokeColor'] = {
                '0%': '#8FFF85',
                '100%': '#39A0FF',
              };
            }
            if (_.status == 3) {
              _['strokeColor'] = {
                '0%': '#FFEB3A',
                '100%': '#4DEF8E',
              };
            }
            return _;
          });
        } else {
          rankingList.value = rankingStaticList;
        }
      });
    }

    function formatStatus(v) {
      let orderStatus = userStore?.dictItems?.order_status;
      return orderStatus.find((k) => parseInt(k['value'], 10) == v)?.label;
    }

    onMounted(() => {
      initOrderStatusCount();
    });

    return {
      rankingList,
      formatStatus,
    };
  },
});
</script>

<style lang="less" scoped>
.left-echarts-node {
  width: 100%;
  height: calc(100vh - 600px);
  // padding: 0 0 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(100px);
  .tip {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-39.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    span {
      position: relative;
    }
    .dv-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 11px;
      width: 95%;
      height: 5px;
    }
  }
  .chart-main {
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    // flex-wrap: wrap;
    display: grid;
    height: calc(100% - 40px);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px 0px;
    .work-order-chart {
      width: 100%;
      margin: 10px 0;
      text-align: center;
      color: #fff;
      .item {
        // .ant-progress {
        //   width: 50%;
        //   :deep(.ant-progress-inner) {
        //     width: 100% !important;
        //     height: 100% !important;
        //   }
        // }
      }
      .desc {
        // margin-top: 6px;
        font-size: 16px;
      }
    }
  }
  .ant-progress {
    :deep(.ant-progress-circle-trail) {
      stroke: #000 !important;
    }
    .ant-progress-text {
      color: #e4e8ec;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
